$selectedColor: #f6f7ff;
$lighterBlue: #409EFF;

.form {
  position: relative;
  width: 100%;
  height: 100%;
}

.left-board {
  width: 260px;
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
}

.left-scrollbar {
  height: calc(100vh - 42px);
  overflow: hidden;
}

.components-list {
  padding: 8px;
  height: 100%;
}

.components-title {
  font-size: 14px;
  color: #222;
  margin: 6px 2px;
}

.components-draggable {
  padding-bottom: 20px;

  .components-item {
    display: inline-block;
    width: 48%;
    margin: 1%;
    transition: transform 0ms !important;

    .components-body {
      padding: 8px 10px;
      background: #f6f7ff;
      font-size: 12px;
      cursor: move;
      border: 1px dashed #f6f7ff;
      border-radius: 3px;
      text-align: center;

      &:hover {
        border: 1px dashed #787be8;
        color: #787be8;
      }
    }
  }
}

.center-board {
  height: 100vh;
  width: auto;
  margin: 0 350px 0 260px;
  box-sizing: border-box;

  .action-bar {
    position: relative;
    height: 42px;
    text-align: right;
    padding: 0 15px;
    border: 1px solid #f1e8e8;
    border-top: none;
    border-left: none;
  }

  .center-scrollbar {
    height: calc(100vh - 42px);
    overflow: hidden;
    border-left: 1px solid #f1e8e8;
    border-right: 1px solid #f1e8e8;

    .center-board-row {
      padding: 12px 12px 15px 12px;

      >.el-form {
        height: calc(100vh - 69px);

        .drawing-item {
          position: relative;
          cursor: move;

          &.active-from-item {
            >.el-form-item {
              background: #f6f7ff;
              border-radius: 6px;
            }

            >.drawing-item-copy {
              display: block;
            }

            >.drawing-item-delete {
              display: block;
            }
          }

          .el-form-item {
            padding: 12px 10px;
          }

          >.drawing-item-copy {
            position: absolute;
            top: -10px;
            width: 22px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            border-radius: 50%;
            font-size: 12px;
            border: 1px solid;
            cursor: pointer;
            z-index: 1;
            right: 56px;
            border-color: #409EFF;
            color: #409EFF;
            background: #fff;
            display: none;

            &:hover {
              background-color: #409EFF;
              color: #fff;
            }
          }

          >.drawing-item-delete {
            position: absolute;
            top: -10px;
            width: 22px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            border-radius: 50%;
            font-size: 12px;
            border: 1px solid;
            cursor: pointer;
            z-index: 1;
            right: 24px;
            border-color: #F56C6C;
            color: #F56C6C;
            background: #fff;
            display: none;

            &:hover {
              background-color: #F56C6C;
              color: #fff;
            }
          }

          &:hover {
            >.drawing-item-copy {
              display: block;
            }
          }

          &:hover {
            >.drawing-item-delete {
              display: block;
            }
          }
        }
      }
    }
  }
}